<template>
    <div class="page-title">支付流水明细</div>
    <el-form class="search-form" inline :model="searchForm">
        <el-row :gutter="10">
            <el-col :span="5">
                <el-form-item class="search-form-item" label="支付方式:">
                    <el-select
                        v-model="searchForm.payType"
                        multiple
                        collapse-tags
                        collapse-tags-tooltip
                        placeholder="请选择支付方式"
                        style="width: 240px"
                        >
                        <el-option
                            v-for="item in payType"
                            :key="item.payCode"
                            :label="item.payName"
                            :value="item.payCode"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item class="search-form-item" label="桌台号:">
                    <el-input v-model="searchForm.roomName" placeholder="请选择桌台号" @click="allTableSelectShow = true" clearable />
                </el-form-item>
            </el-col>
            
            <el-col :span="4">
                <el-form-item class="search-form-item" label="手机号:">
                    <el-input v-model="searchForm.mobile" clearable placeholder="请输入手机号" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item class="search-form-item" label="客户姓名:">
                    <el-input v-model="searchForm.name" clearable placeholder="请输入客户姓名" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item class="search-form-item spe" label="单号:">
                    <el-input v-model="searchForm.code" clearable placeholder="券号/结账单号/台单号/会员卡号/支付流水" />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item class="search-form-item" label="支付时间:">
                    <el-date-picker v-model="searchForm.operDate" type="datetimerange" start-placeholder="开始时间"
                        end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item class="search-form-item"  label="金额:">
                    <el-input v-model="searchForm.payMoneyMin" clearable placeholder="请输入最小金额" oninput="value=value.replace(/[^0-9.]/g,'')"/>
                    <span>&nbsp;一&nbsp;</span>
                    <el-input v-model="searchForm.payMoneyMax" clearable placeholder="请输入最大金额" oninput="value=value.replace(/[^0-9.]/g,'')"/>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item class="search-form-item" label="券名称:">
                    <el-input v-model="searchForm.tickeNameorCode" clearable placeholder="请输入券名称和券码" />
                </el-form-item>
            </el-col>
            <el-col :span="15">
            </el-col>
            <el-col :span="8">
                <el-form-item class="action-btn-box">
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                    <el-button class="reset-btn" @click="handleReset">清空筛选</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <div class="table-box">
        <el-table :data="tableData" stripe v-loading="loading">
            <el-table-column prop="itemCode" label="支付流水号" :min-width=" tableColumnWidth"  align="center"/>
            <el-table-column prop="roomName" label="桌台号" :min-width="orderColumnWidth" align="center"/>
            <el-table-column prop="payTime" label="支付日期" :min-width=" tableColumnWidth"  align="center">
                <template #default="scope">
                    <span >{{ scope.row.payTime?dayjs(scope.row.payTime).format('YYYY-MM-DD HH:mm:ss'):'--' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="payAmt" label="支付金额" :min-width="orderColumnWidth" align="center" />
            <el-table-column prop="payName" label="支付方式"  :min-width="orderColumnWidth" align="center" />
            <el-table-column prop="memberName" label="客户姓名" :min-width="tableColumnWidth" align="center" />
            <el-table-column prop="mobile" label="手机号" :min-width="tableColumnWidth" align="center" />
            <el-table-column prop="cardNo" label="会员卡号" :min-width=" tableColumnWidth"  align="center" />
            <el-table-column prop="ticketName" label="券名称" :min-width="orderColumnWidth" align="center" />
            <el-table-column prop="ticketCode" label="券号" :min-width="orderColumnWidth" align="center" />
            <el-table-column prop="payBatchCode" label="结账单号" :min-width=" tableColumnWidth"   align="center" />
            <el-table-column prop="consumeCode" label="台单号" :min-width=" tableColumnWidth"  align="center" />
            <el-table-column prop="remark" label="备注" :min-width=" tableColumnWidth"  align="center" />
           
           
        </el-table>
    </div>
    <div class="orderRecords-container-footer">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next,sizes, jumper"
            :total="total">
        </el-pagination>
        <button class="footer-button">确定</button>
    </div>
    <AllTableSelect v-model="allTableSelectShow" @cancel="allTableSelectShow = false" @confirm="selectTable" />
</template>
  
<script setup>
import AllTableSelect from '@/views/components/AllTableSelect.vue'
import { formatDate, dateBefore, transformWorkTime } from '@/utils/chenhao.js'
import Api from '@/api'
import useConfigStore from '@/store/config'  
import dayjs from 'dayjs'
const configStore = useConfigStore()
const orgStartTime = configStore.shopInfo.orgReportStartTime //orgStartTime
const orgEndTime = configStore.shopInfo.orgReportEndTime //orgEndTime

const tableColumnWidth = ref('200')
const orderColumnWidth = ref('90')
window.addEventListener("resize",readerSize)
function readerSize (){
    console.log(window.innerWidth,'window.innerWidth2222222');
    if(window.innerWidth >= 1200){
        tableColumnWidth.value = '160'
    }else if(window.innerWidth >= 800 && window.innerWidth < 1200){
        tableColumnWidth.value = '120'
    }else if(window.innerWidth >= 400 && window.innerWidth < 800){
        tableColumnWidth.value = '40'
    } 
}

// 点击选择桌台
const allTableSelectShow = ref(false)
// 选中桌台
const selectTable = (data) => {
    if (data.name) {
        console.log(data);
        searchForm.value.roomCode = data.code
        searchForm.value.roomName = data.name
        allTableSelectShow.value = false
    } else {
        ElNotification({
            title: '提示',
            message: '请选择桌号',
            type: 'warning',
        })
    }

}

// 获取支付类型
let payType = ref([])
const get_payType = (params) => {
    Api.Common.PcObjProcess.Do({ "functionName": "getPayType",  "contentData": '' }).then(res => {
        console.log('获取服务员OPTIONS res :>> ', res,);
        payType.value = res.result
    })
}
get_payType() 

let loading = ref(false)
const searchForm = ref({  
    operDate: transformWorkTime('今天',orgStartTime,orgEndTime),
    pageSize: "10",
    pageIndex: "1",
    code:'', // "券号/结账单号/台单号/会员卡号"
    mobile:'',
    name:'', // 会员名称
    roomCode:'',
    roomName:'',
    payType:'', // 支付方式 逗号隔开 通过接口获取
    payMoneyMin:'', // 付款金额最小
    payMoneyMax:'', // 付款金额最大
 })

// 搜索
const handleSearch = (params) => {
    currentPage.value = 1;
    getTableData();
}
// 重置
const handleReset = (params) => {
    searchForm.value = {}
    handleSearch()
}
// 查询表格数据
let tableData = ref([{}])
let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getTableData()
}
const validatePhoneNumber =(phoneNumber)=> {
  const regex = /^1[3-9]\d{9}$/;
  return regex.test(phoneNumber);
}
const getTableData = (user) => {
    console.log(searchForm.value);
    if( searchForm.value.mobile && !validatePhoneNumber(searchForm.value.mobile)){
        ElNotification({
            title: '提示',
            message: '请输入正确手机号',
            type: 'warning',
        })
      return
    }
    if(searchForm.value.payMoneyMax < searchForm.value.payMoneyMin){
        ElNotification({
            title: '提示',
            message: '最大金额不能小于最小金额',
            type: 'warning',
        })
      return
    }
    let query = {
        ...searchForm.value,
        pageIndex: currentPage.value,
        pageSize: pageSize.value,
        payType:searchForm.value.payType?searchForm.value.payType.join(','):'',
    }
   
    if (query.operDate && query.operDate.length > 1) {
        query.payStartTime = query.operDate[0]
        query.payEndTime = query.operDate[1]
    }
    console.log('查询前的query :>> ', query,);
    loading.value = true
    // return
    Api.Common.PcObjProcess.Do({ "functionName": "GetOrderPayRecord",  "contentData": query }).then(res => {
        console.log('查询订单table res :>> ', res,);
        loading.value = false
        tableData.value = res.data
        total.value = res.totalCount
    })
}
getTableData()



</script>
  
<style scoped lang="scss">
@import '@/styles/com_style_input.css';
/* 在这里编写组件的CSS样式 */
// .app-container {}
.search-form {
    width: 1520px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 20px 10px 0 40px;
    margin-bottom: 20px;
   
    .search-form-main{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    // display: flex;
    .search-form-item {
        ::v-deep {
            .el-form-item__label {
                line-height: 48px;
            }

            .el-date-editor {
                

            }
            
            
            .el-input {
                width: 200px;
            }
            

            .el-input__wrapper {
                height: 40px;
                background: #FAFAFA;
                border-radius: 8px;
            }

            .el-select__wrapper {
                width: 200px;
                height: 40px;
                background: #FAFAFA;
                border-radius: 8px;
            }
        }
        &.spe{
            ::v-deep{
                .el-input {
                    width: 280px;
                }
            }
        }
    }

    .range-item {
        .el-input {
            width: 130px;
        }
    }

    .action-btn-box {
        float: right;

        button {
            width: 120px;
            height: 50px;
            line-height: 50px;
            background: #FFE566;
            border-radius: 8px;
            border: 0;
            font-size: 16px;
            color: #212121;
        }

        .reset-btn {
            background: #E6E6E6;
            color: #666666;
        }
    }
}

.table-box {
    padding: 20px 40px;
    background: #FFFFFF;
    border-radius: 8px;
    width: 1520px;

    .total-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        color: #212121;
    }

    .el-table--fit {
        height: 400px;
  }

    ::v-deep {
        .el-table__inner-wrapper::before {
            height: 0px;
        }

        .el-table th {
            font-size: 13px;
            font-weight: 700;
        }

        .el-table .el-table__header th,
        .el-table .el-table__header tr,
        .el-table .el-table__header td {
            height: 48px;
            background: #F9F9F9;
        }
    }

    .action-btn {
        width: 66px;
        height: 28px;
        border-radius: 4px;
        border: 1px solid #FF6A00;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #FF6A00;
    }
}

.pagination-box {
    margin-top: 20px;

    ::v-deep {
        .number {
            background: #E6E6E6 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #666666;
        }

        .number:hover {
            color: #FF6A00;
        }

        .is-active {
            background-color: #FF6A00 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #FFFFFF;
        }

    }
}

.color-FF6A00 {
    color: #FF6A00;
}

.page-title {
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 24px;
    color: #212121;
    margin-bottom: 10px;
}
::v-deep .el-table .cell {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 0.07292rem;
    color: #666666;
    line-height: 0.07292rem;
}
</style>
  